<template>
  <h1>{{ xxx.num }}</h1>
  <button @click="btnClick">点击xxx++</button>
</template>
<script>
import { reactive } from 'vue'

export default {
  // 入口函数，组合api代码都要写到setup内
  // 执行时机：它在beforeCreate前执行,不能使用this
  // html中要用什么，它就要return 什么
  // reactive:定义响应式数据，传统定义的数据都是非响应式的
  /*
   用法：
      1：导入  import {reactive} from 'vue'
      2:定义（在setup内定义）
        const 变量名=reactive({一定要是复杂数据类型，一般都是用对象})
        const user=reactive({age:18})
        它定义的变量就是响应式数据了
      3:访问 
        user.age  
  */

  setup () {
    let xxx = reactive({ num: 0 })
    const btnClick = () => {
      xxx.num++
    }
    return { xxx, btnClick }
  }
}
</script>
